<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>连锁干洗中心业务管理系统</title>
    <%- include('css') %>
    <style>
        .layui-table-cell{
            height:100%;
        }
    </style>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <%- include('header') %>
        <%- include('menu') %>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend class="layui-anim layui-anim-scaleSpring">类别管理 __ 一级类别</legend>
                </fieldset>

                <form name="form1" class="layui-form" action="">

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">类别名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="search" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <table class="layui-hide" id="tablediv" lay-filter="tablediv"></table>
                </form>
                <script type="text/html" id="toolbar">
                    <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="search">查询</button>
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="tonew">新建</button>

                  </div>
                </script>

            </div>
        </div>
        <%- include('footer') %>
    </div>
    <%- include('script') %>

    <script>
        var table;
        var vm = new Vue({
            el: '#app',
            mounted: function () {
                layui.use(['element', "table", 'form', 'laydate', 'laytpl','layer'], function () {

                    var laydate = layui.laydate,
                        form = layui.form,
                        laytpl = layui.laytpl,
                        layer = layui.layer,
                        element = layui.element;
                    table = layui.table

                    table.render({
                        elem: "#tablediv",
                        url: "/admin/type",
                        toolbar: '#toolbar',
                        cols: [
                            [
                                {
                                    field: "num",
                                    title: "序号"
                                },
                                {
                                    field: "pic",
                                    title: "示意图",
                                    width:150,
                                    templet:function (d) {
                                        var str = '';
                                        str = '<div><image lay-event="photo" style="height:100px;width:100px" layer-src="'+d.pic+'" src="'+d.pic+'"></image></div>';
                                        return str;
                                    }
                                },
                                {
                                    field: "name",
                                    title: "类别名称",
                                },
                                {
                                    field: "created_at",
                                    title: "创建时间",
                                    sort: true
                                },
                                {
                                    fixed: 'right',
                                    title: '操作',
                                    templet:function (d) {
                                        let str = '';
                                        str =
                                            ' <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="view">查看</a>' +
                                            '<a class="layui-btn layui-btn-sm " lay-event="edit">编辑</a>' +
                                            '<a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="two">二级类别</a>' +
                                            '<a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</a>';
                                        return str;
                                    }
                                }
                            ]
                        ],
                        page: true,
                    });

                    table.on('toolbar(tablediv)', function (obj) {
                            if (obj.event === 'tonew') {
                                layer.open({
                                    type: 2,
                                    title: false,
                                    area: ['1000px', '600px'],
                                    anim: 2,
                                    content: ['/admin/type/tonew'], //iframe的url，no代表不显示滚动条
                                    end: function () { //
                                    }
                                });
                            }
                        })

                    table.on('tool(tablediv)', function (obj) {
                        var data = obj.data;
                        if (obj.event === 'del') {
                            layer.confirm('真的删除行么', function (index) {
                                $.ajax({
                                    url:'/admin/type/'+data.id,
                                    type:'Delete',
                                    data:{},
                                    success:(res)=>{
                                        if(res.code === 200){
                                            layer.close(index);
                                            layer.msg('删除成功！',{icon:1});
                                            table.reload('tablediv',{
                                                where:{}
                                            });
                                        }else{
                                            layer.msg('删除失败：'+res.error+' -- '+res.code,{icon:2});
                                        }
                                    }
                                });
                            });
                        } else if (obj.event === 'edit') {
                            layer.open({
                                type: 2,
                                title: false,
                                area: ['1000px', '500px'],
                                anim: 2,
                                content: ['/admin/type/toedit?id=' + data.id], //iframe的url，no代表不显示滚动条
                                end: function () { //此处用于演示
                                }
                            });
                        } else if (obj.event === 'view') {
                            layer.open({
                                type: 2,
                                title: false,
                                area: ['1000px', '500px'],
                                anim: 2,
                                content: ['/admin/type/todetail?id=' + data.id], //iframe的url，no代表不显示滚动条
                                end: function () { //此处用于演示
                                }
                            });
                        } else if (obj.event === 'photo') {
                            layer.photos({
                                photos: {
                                    "title": "", //相册标题
                                    "id": 123, //相册id
                                    "start": 0, //初始显示的图片序号，默认0
                                    "data": [   //相册包含的图片，数组格式
                                        {
                                            "alt": data.name,
                                            "pid": 666, //图片id
                                            "src": data.pic, //原图地址
                                            "thumb": "" //缩略图地址
                                        }
                                    ]
                                }
                                ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                            });
                        } else if (obj.event === 'two') {
                            window.open('/admin/render/typesec/to?id='+data.id+'&name='+data.name);
                        }
                    });

                    //查询按钮
                    form.on('submit(search)', function (data) {
                        table.reload('tablediv', {
                            where: { //设定异步数据接口的额外参数，任意设
                                search: data.field.search
                                //…
                            },
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        return false;
                    });
                })
            },
            methods: {
                iframeclose: function () {
                },
                iframesave: function () {
                    table.reload('tablediv', {
                        where: { //设定异步数据接口的额外参数，任意设
                        },
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                },
                iframeupdate: function () {
                    table.reload('tablediv', {
                    });
                }
            }
        })
    </script>
</body>

</html>
